# jQuery Selectric

## How to use

1. Make sure to include jQuery in your page:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Include jQuery Selectric:

    <script src="js/jquery.selectric.min.js"></script>

3. Put styles in your CSS and change it to your taste :D

    /*======================================================================
      Selectric
    ======================================================================*/

    .selectricWrapper {
      position: relative;
      margin: 0 0 10px;
      width: 300px;
      cursor: pointer;
    }

    .selectricResponsive {
      width: 100%;
    }

    .selectric {
      border: 1px solid #DDD;
      background: #F8F8F8;
      position: relative;
      border-radius: 2px;
    }

    .selectric .label {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      margin: 0 30px 0 0;
      padding: 6px;
      font-size: 12px;
      line-height: 18px;
      color: #444;
      min-height: 18px;
    }

    .selectric .button {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 30px;
      color: #BBB;
      text-align: center;
      font: 0/0 a;
      /* IE Fix */
      *font: 20px/30px Lucida Sans Unicode, Arial Unicode MS, Arial;
    }

    .selectric .button:after {
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 0;
      height: 0;
      border: 4px solid transparent;
      border-top-color: #BBB;
      border-bottom: none;
    }

    .selectricHover .selectric {
      border-color: #CCC;
    }

    .selectricHover .selectric .button {
      color: #888;
    }

    .selectricHover .selectric .button:after {
      border-top-color: #888;
    }

    .selectricOpen {
      z-index: 9999;
    }

    .selectricOpen .selectric {
      border-color: #CCC;
      background: #F0F0F0;
      z-index: 9999;
    }

    .selectricOpen .selectricItems {
      display: block;
    }

    .selectricDisabled {
      filter: alpha(opacity=50);
      opacity: 0.5;
      cursor: default;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .selectricHideSelect {
      position: relative;
      overflow: hidden;
      width: 0;
      height: 0;
    }

    .selectricHideSelect select {
      position: absolute;
      left: -100%;
      display: none;
    }

    .selectricInput {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 1px !important;
      height: 1px !important;
      outline: none !important;
      border: none !important;
      *font: 0/0 a !important;
      background: none !important;
    }

    .selectricTempShow {
      position: absolute !important;
      visibility: hidden !important;
      display: block !important;
    }

    /* Items box */

    .selectricItems {
      display: none;
      position: absolute;
      overflow: auto;
      top: 100%;
      left: 0;
      background: #F9F9F9;
      border: 1px solid #CCC;
      z-index: 9998;
      -webkit-box-shadow: 0 0 10px -6px;
      box-shadow: 0 0 10px -6px;
    }

    .selectricItems ul,
    .selectricItems li {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 12px;
      line-height: 20px;
      min-height: 20px;
    }

    .selectricItems li {
      display: block;
      padding: 5px;
      border-top: 1px solid #FFF;
      border-bottom: 1px solid #EEE;
      color: #666;
      cursor: pointer;
    }

    .selectricItems li.selected {
      background: #EFEFEF;
      color: #444;
      border-top-color: #E0E0E0;
    }

    .selectricItems li:hover {
      background: #F0F0F0;
      color: #444;
    }

    .selectricItems li.disabled {
      background: #F5F5F5;
      color: #BBB;
      border-top-color: #FAFAFA;
      cursor: default;
    }

4. Initialize jQuery Selectric:

    $(function(){
      $('select').selectric();
    });

## Options

You can pass a options object as the first parameters when you call the plugin. For example:

    $('select').selectric({
      maxHeight: 200
    });

Option | Default | Type | Description
onOpen |
    function() {}
| Function | Function called when select options is opened
onChange |
    function() {}
| Function | Function called when select options is changed
onClose |
    function() {}
| Function | Function called when select options is closed
maxHeight |
    300
| Integer | Maximum height options box can be
keySearchTimeout |
    500
| Integer | After this time without pressing any key, the search string is reseted
arrowButtonMarkup |
    <b class="button">&#9662;</b>
| String [HTML] | Markup for open options button
disableOnMobile |
    true
| Boolean | Initialize plugin on mobile browsers
border |
    1
| Integer | Options box border thickness
openOnHover |
    false
| Boolean | Open select box on hover, instead of click
expandToItemText |
    false
| Boolean | Expand options box past wrapper
responsive |
    false
| Boolean | The select element become responsive
customClass |
    {
      prefix: 'selectric',
      postfixes: 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive',
      camelCase: true
    }
| Object | Custom classes

## Public methods

    $('select').selectric('refresh'); // Reconstruct the instance of plugin
    $('select').selectric('destroy'); // Destroy select and go back to normal
    $('select').selectric('open');    // Open options
    $('select').selectric('close');   // Close options

## Browser support

- Firefox
- Chrome
- Safari
- Internet Explorer 7+
- Opera

## Demo

- Custom element
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, aliquid alias ipsum facilis dolorum doloremque excepturi consequatur nihil earum corporis. Voluptate molestiae, natus enim soluta sapiente praesentium ex dolorem veniam.

Project maintained by Leonardo Santos
Github • Twitter • Email